<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>addEventListener()与事件传递(事件委托)</title>
    <style>
    #myDiv,#myDiv2{
        width: 500px;
        height: 200px;
        border: 1px solid #333333;
        background-color: antiquewhite;
    }
    </style>
</head>

<body>
    <button id="btn">点击</button>
    <button id="btnTwo">点击2</button>
    <div id="myDiv">
        <p id="myP">点击段落，我是冒泡。</p>
    </div><br>
    <div id="myDiv2">
        <p id="myP2">点击段落，我是捕获。 </p>
    </div>
    <script>
        let Obtn = $("btn");
        let ObtnTwo = $("btnTwo");
        //向元素添加事件监听
        Obtn.addEventListener('click', function () {
            alert("hello world!")
        })
        Obtn.addEventListener('click', function () {
            alert("hello js!")
        })

        //向window对象添加监听
        window.addEventListener('resize', function () {
            console.log("你正在重置浏览器窗口!");
        })

        function $(id) {
            return document.getElementById(id);
        }

        function totalNum(num1, num2) {
            let result = num1 + num2
            return result

        }
        //传递参数
        ObtnTwo.addEventListener('click', function () {
            let results = totalNum(3, 3)
            console.log(results);
        });
        //事件冒泡
        $("myDiv").addEventListener('click',function(){
           alert("你点击了div1")
        }, false);
        $("myP").addEventListener('click',function(){
           alert("你点击了div1里面的p元素")
        }, false);
        //事件捕获
        $("myDiv2").addEventListener('click',function(){
           alert("你点击了div1")
        }, true);
        $("myP2").addEventListener('click',function(){
           alert("你点击了div1里面的p元素")
        }, true);


        /*
        addEventListener() 方法用于向指定元素添加事件句柄。
        1.向元素添加事件监听 
        2.可以向元素添加多个事件监听,且不会覆盖之前的
        3.可以向任意dom对象添加事件,包括window
         
        事件委托:
        事件传递有两种方式：冒泡与捕获。

        在事件 冒泡 中, 内部元素事件会先触发,然后再触发外部元素事件
        在事件 捕获 中，外部元素的事件会先被触发，然后才会触发内部元素的事件

        在addEventListener('事件',function,第三个参数)的第三个参数中传递false或true,
        false代表为事件冒泡,true代表事件捕获
        */
    </script>
</body>

</html>